<template>
  <div class="login_page">
    <transition name="form-fade" mode="in-out">
      <section class="form_contianer">
        <div class='titleArea rflex'>
          <img class="logo" src="../assets/img/mlogo.png" alt="智慧工厂管理后台">
          <span class='title'>智慧工厂<i>管理后台</i></span>
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
          <el-form-item prop="username" class="login-item">
            <!-- <span class="loginTips"><svgicon icon-class="user"/></span> -->
            <el-input  prefix-icon="el-icon-user" @keyup.enter.native="submitForm('loginForm')" class="area" type="text" placeholder="用户名"
                      v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password" class="login-item">
            <!-- <span class="loginTips"><svgicon icon-class="password"/></span> -->
            <el-input prefix-icon="el-icon-warning-outline" @keyup.enter.native="submitForm('loginForm')" class="area" type="password" placeholder="密码"
                      v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登录</el-button>
          </el-form-item>
          <div class="tiparea">
            <p class="wxtip">温馨提示：</p>
            <p class="tip">用户名为：majia</p>
            <p class="tip">密码为：111111</p>
          </div>
        </el-form>
      </section>
    </transition>
  </div>
</template>

<script>
import logoImg from "@/assets/img/logo.png";
import {login} from "@/api/user";
import {setToken} from '@/utils/auth'
import { store } from '../store';
import svgicon from '@/components/SvgIcon';
export default {
  components: {
    svgicon
  },
  data() {
    return {
      logo: logoImg,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
      }
    }
  },
  mounted() {
  },
  methods: {
    loginByWechat() {
    },
    showMessage(type, message) {
      this.$message({
        type: type,
        message: message
      });
    },
    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          let userinfo = {username: this.loginForm.username, password: this.loginForm.password};
          login(userinfo).then(res => {
            if (res.code == 200) {
            let userList = res.data;
            setToken("Token", userList.token)
            store.commit('setToken',userList.token);
            this.$router.push({path: '/home'})
            }else{
              this.$message(res.message);
            }
           
          })
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.login_page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../assets/img/bg10.png) no-repeat center center;
  background-size: 100% 100%;
}

.form_contianer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 370px;
  border-radius: 5px;
  padding: 25px;
  text-align: center;

  .titleArea {
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 22px;
    width: 100%;
    padding-bottom: 20px;

    .logo {
      width: 40px;
      margin-right: 10px;
    }

    .title {
      i {
        color: #1979e7;
      }
    }
  }

  .loginForm {
    .submit_btn {
      width: 100%;
      padding: 13px 0;
      font-size: 16px;
    }

    .loginTips {
      position: absolute;
      left: 10px;
      z-index: 20;
      // color: #4784df;
      font-size: 18px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.manage_tip {
  margin-bottom: 20px;

  .title {
    font-family: cursive;
    font-weight: bold;
    font-size: 26px;
    color: #fff;
  }

  .logo {
    width: 60px;
    height: 60px;
  }
}

.tiparea {
  text-align: left;
  font-size: 12px;
  color: #4cbb15;
  padding: 10px 0;

  .tip {
    margin-left: 54px;
  }
}

.form-fade-enter-active, .form-fade-leave-active {
  transition: all 1s;
}

.form-fade-enter, .form-fade-leave-active {
  transform: translate3d(0, -50px, 0);
  opacity: 0;
}

.loginForm {
  .el-button--primary {
    background-color: #1979e7;
    border: 1px solid #1979e7;
  }
}

.sanFangArea {
  border-top: 1px solid #DCDFE6;
  padding: 10px 0;
  display: none;

  .title {
    font-size: 14px;
    color: #8b9196;
    margin-bottom: 10px;
  }

  ul {
    li {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .svg-icon {
        font-size: 24px;
      }
    }
  }
}
</style>
